.detail{
    height: 100%;
    position: relative;
    width: 100%;
    background-color: #d9d9d9;
    .swiper-box{
        position: relative;
        width: 750rpx;
        height: 750rpx;
        .swiper{
            width: 100%;
            height: 100%;
            .sw-item{
                width: 100%;
                height: 100%;
                image{
                    width: 750rpx;
                    height: 750rpx;
                }
            }
        }
        .wxbtn{
            position: absolute;
            width: 150rpx;
            height: 60rpx;
            line-height: 60rpx;
            right: 0;
            top: 100rpx;
            background-color: rgb(212, 178, 115);
            border-radius: 30rpx 0 0rpx 30rpx;
            color: rgb(255, 255, 255);
            font-size: 20rpx;
            letter-spacing: 8rpx;
        }
    }
    .brief{
        width: 100%;
        .promise{
            margin: 0 auto;
            display: flex;
            width: 710rpx;
            height: 73rpx;
            justify-content: space-between;
            div{
                background: url('../../../static/icon/circular.png') 0 center no-repeat;
                background-size: 10rpx;
                padding-left: 15rpx;
                display: flex;
                line-height: 73rpx;
                font-size: 25rpx;
                color: #666;
            }
        }
        .desc{
            height: 300rpx;
            background-color: #fff;
            width: 100%;
            padding: 20rpx 0;
            box-sizing: border-box;
            
            div{
                text-align: center;
                margin: 20rpx 0;
            }
            .title{
                font-size: 35rpx;
            }
            div:nth-child(2){
                font-size: 20rpx;
                color: #b8b6b6;
            }
            &-price{
                color: rgb(201, 93, 93);
                font-size: 30rpx;
                letter-spacing: 0;
                letter-spacing: -1rpx;
            }
            .brand{
                width: 200rpx;
                margin: 0 auto;
                text-align: center;
                padding: 10rpx;
                margin: 10rpx auto;
                color: rgb(212, 178, 115);
                border: rgb(212, 178, 115) 1rpx solid;
                margin-bottom: 20rpx;
            }
        }
    }
    .quantity{
        box-sizing: border-box;
        margin-top: 1rpx ;
        width: 100%;
        height: 80rpx;
        background-color: #fff;
        display: flex;
        line-height: 80rpx;
        justify-content: space-between;
        padding: 0 20rpx;
        img{
            width: 80rpx;
            height: 80rpx;
        }
    }
    .se{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .select{
            position: fixed;
            left: 0;
            width: 100%;
            height: 500rpx;
            bottom: -500rpx;
            transition: all 5s ease;
            box-sizing: border-box;
            padding: 30rpx;
            background: #fff;

            justify-content: space-between;
            .se-left{
                width: 375rpx;
                display: flex;
                img{
                    width: 200rpx;
                    height: 200rpx;
                }
                .se-content{
                   
                    font-weight: 800;
                   margin-top: 30%;
                   margin-left: 20rpx;
                   div:nth-child(1){
                    font-size: 28rpx;
                    color: rgb(185, 76, 76);
                   }
                   div:nth-child(2){
                    font-size: 28rpx;
                   }
                    
                }
            }
            .cancel{
                text-align: center;
                right: -480rpx;
                width: 375rpx;
                position: relative;
                top: -200rpx;
                font-size: 40rpx;
            }
            .seTitle{
                position: absolute;
                top: 230rpx;
                font-size: 30rpx;
                font-weight: 800;
                
            }
        }
        .seed{
            transform: translateY(-500rpx);

        }
        .container{

            display: flex;
            flex-direction: row;
            width: 40rpx;
            position: absolute;
            top:68rpx;
            
            span{ 
                border: 1rpx solid rgb(190, 190, 190);
                padding: 18rpx 30rpx;
                text-align: center;
 
            }
            span:nth-child(2){
                padding: 18rpx 45rpx;
                font-weight: 800;
            }
        }
    }
    .params{
        box-sizing: border-box;
        margin-top: 20rpx;
        background-color: #fff;
        padding-bottom: 10rpx;
        &-title{
            font-size: 50rpx;
            padding:30rpx 25rpx;
            font-weight: 800;
        }
        .p-content{
            // text-align: center;
            margin: 20rpx auto;
            box-sizing: border-box;

            display: flex;
            height: 100rpx;
            width: 90%;
            line-height: 100rpx;
            background-color:rgba(88, 88, 88, 0.1);
            .pinp{
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
            }
            .p-name{
                width: 280rpx;
                margin-left: 50rpx;
            }
            .p-val{
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }
        }
    }
    .wxParse {
    }
    .qa-box{
        letter-spacing: 1rpx;
        margin-top: 10rpx;
        width: 100%;
 
        background-color: #fff; 
        .qa-title{
            padding: 30rpx;
            text-align: center;
            font-size: 38rpx;
            font-weight: 800;
        }    

        .qa-container{
            width: 100%;

            .quest{
                padding: 0 50rpx;
                display: flex;
       
    
                .circular{
                    
                    width:15rpx;
                    height:15rpx;
                    background-color: brown;
                    border-radius: 50%;
                    margin-top: 17rpx;
                }
                .question{
                    
                    margin-left: 10rpx;
                    font-weight: 700;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgb(128, 128, 128);
    
                }
            }
            .answer{
                padding: 5rpx  80rpx 20rpx;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                color: rgb(136, 136, 136);
            }
    
        }       


    }
    .guess{
        width: 100%;
        margin-top: 10rpx;
        &-title{
            text-align: center;
            padding: 20px;
            font-weight: 600;
            background-color: #fff;
        }
        &-box{
            display: flex;
            
            justify-content: space-around;
            flex-wrap: wrap;
            
            .guess-item:nth-child(1){
                margin-top: 5rpx;
            }
            .guess-item:nth-child(2){
                margin-top: 5rpx;
            }

            .guess-item{
                width: 370rpx;
                background-color: #fff;
                margin: 5rpx 0;
                font-size: 25rpx;
                font-weight: 700;
                img{
                    width: 302rpx;
                    height: 302rpx;
                    display: block;
                    margin: 0 auto;
                }
                .guess-headline{
                   width: 90%;
                    div:nth-child(2){
                        color: brown;
                    }
                    div:nth-child(1){
                        width: 95%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin: 10rpx 0;
                        
                    }
                    padding: 10rpx 20rpx;
                    width: 100%;

                }
            }
        }

    }
    .tabbar{
        border-top: rgba(230, 230, 230, 0.863) 1rpx solid;
        background-color: #fff;
        width: 100%;
        position: fixed;
        justify-content: center;
        align-items: center;
        right: 0;
        bottom: 0;
        display: flex;
        line-height: 100rpx;
        

        div{
            border-left: rgba(230, 230, 230, 0.863) 1rpx solid;
            text-align: center;
        }

        .collect{
            text-align: center;
            width: 100%;
            height: 100rpx;
            img{
                background: url('../../../static/images/icon_collect.png') center no-repeat;
                background-size: 100% 100%;
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 13rpx;


                width: 50rpx;
                height: 50rpx;
            }

        }
        .cart{
            width: 100%;
            height: 100rpx;
            position: relative;
            
            img{
                display: inline-block;
                vertical-align: middle;
                width: 50rpx;
                height: 50rpx;
            }
            .tabbar-icon{

                .cartNum{
                    right: 16rpx;
                    position: absolute;
                    top: -9rpx;
                    height: 25rpx;
                    width: 25rpx;
                    padding: 8rpx;
                    background-color:  rgb(218, 53, 53);
                    color: rgb(218, 53, 53);
                    border-radius: 50%;
                    margin-top: 20rpx;
                    .cartbg{
                        position: absolute;
                        top: -29rpx;
                        left: 13rpx;
                        color: rgb(255, 255, 255);
                    }
    
                }

            }


        }
        .buy{
            
            width: 130%;
            height: 100%;
    
        }
        .join{
            color: #fff;
            width: 130%;
            height: 100%;
            background-color: rgb(218, 53, 53);
        }
    }

    .collect.ct_active{
        img{
            background: url('../../../static/images/icon_collect_checked.png') center no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 13rpx;
            width: 50rpx;
            height: 50rpx;
        }
    }


}